<template>
    <el-tabs v-model="activeTag">
        <el-tab-pane label="更新单词" name="wordUpdateTAG">
            <el-form ref="wordUpdateRef" :model="wordUpdate" :rules="rules" label-width="100px" size="medium" >
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="课程类型" prop="courseParentId">
                            <el-select v-model="wordUpdate.courseParentId" placeholder="请选择课程类型" @change="courseChangeEvent" style="width:100%">
                                <el-option v-for="item in parentCourseData" :key="item.value" :label="item.label" :value="item.value"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="课程" prop="courseId">
                            <el-select v-model="wordUpdate.courseId" placeholder="请选择课程" style="width:100%">
                                <el-option v-for="item in childCourseData" :key="item.value" :label="item.label" :value="item.value"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="中文意思" prop="zhWord">
                            <el-input v-model="wordUpdate.zhWord" placeholder="请输入中文意思"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="日文含汉字" prop="riWord">
                            <el-input v-model="wordUpdate.riWord" placeholder="请输入日文含汉字,没有汉字可以忽略"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>   
                    <el-col :span="12">
                        <el-form-item label="日文假名" prop="riWordKana">
                            <el-input v-model="wordUpdate.riWordKana" placeholder="请输入纯假名的日文"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="单词标签" prop="wordTagId">
                            <el-select v-model="wordUpdate.wordTagId"  placeholder="请选择单词所属标签"  style="width:100%">
                                <el-option label="名词" value="9"/>
                                <el-option label="一类动词" value="1"/>
                                <el-option label="二类动词" value="2"/>
                                <el-option label="三类动词「动名词」" value="3"/>
                                <el-option label="い形词" value="5"/>
                                <el-option label="な形词" value="4"/>
                                <el-option label="副词" value="8"/>
                                <el-option label="名、副词" value="12"/>
                                <el-option label="动、名、副" value="13"/>
                                <el-option label="な形容词、副词" value="17"/>
                                <el-option label="连体词" value="10"/>
                                <el-option label="接续词" value="11"/>
                                <el-option label="语法" value="6"/>
                                <el-option label="寒暄语" value="7"/>
                                <el-option label="指示词" value="14"/>
                                <el-option label="疑问词" value="15"/>
                                <el-option label="感叹词" value="16"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24" style="display:grid;place-items:center;">
                        <el-button type="primary" circle icon="el-icon-mic" @mousedown.native="startRecord" @mouseup.native="stopRecord"></el-button>
                        <b style="margin-top:10px;color: deepskyblue;">重新录入单词发音</b>
                    </el-col>
                </el-row>
            </el-form>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
    export default {
        props: {
            wordUpdate: {
                type: Object,
                required: true
            },
            rules: {
                type: Object,
                required: false,
            },
            roleList: {
                type: Array,
                required: false
            },
            //渲染主课程的数据
            parentCourseData :{
                type: Array,
                required: true
            },
            //渲染子课程的数据
            childCourseData :{
                type: Array,
                required: true
            }
        },
        data(){
            return {
                activeTag: "wordUpdateTAG"
            }
        },
        methods:{
            //重置表单
            reset() {
                this.$refs.wordUpdateRef.resetFields();
            },
            //开启录音
            startRecord(){
                if(this.wordUpdate.riWord){
                    this.$recorder.startRecording(this.wordUpdate.riWord);
                }else{
                    this.$message.error('请先录入单词');
                }
            },
            //停止录音
            stopRecord(){
                this.$recorder.stopRecording();
            },
            //课程数据改变
            courseChangeEvent(v){
                this.$emit('updateCourseChange',v,'update')
            },
        }
    }
</script>